import React from 'react'
import { Card, Row, Col, Typography, Statistic } from 'antd'
import {
    ShoppingCartOutlined,
    UserOutlined,
    SafetyCertificateOutlined,
    CustomerServiceOutlined
} from '@ant-design/icons'

const { Title } = Typography

const DashboardPage: React.FC = () => {
    return (
        <div>
            <Title level={3}>仪表盘</Title>
            <Row gutter={16}>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="商品总数"
                            value={120}
                            prefix={<ShoppingCartOutlined />}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="用户总数"
                            value={850}
                            prefix={<UserOutlined />}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="待处理客服"
                            value={8}
                            prefix={<CustomerServiceOutlined />}
                        />
                    </Card>
                </Col>
                <Col span={6}>
                    <Card>
                        <Statistic
                            title="权限项"
                            value={24}
                            prefix={<SafetyCertificateOutlined />}
                        />
                    </Card>
                </Col>
            </Row>
        </div>
    )
}

export default DashboardPage